<!--
 * @Author: xu xuejia
 * @Date: 2021-11-27 14:20:44
 * @LastEditors: xu xuejia
 * @LastEditTime: 2021-12-14 08:32:10
 * @Description: 分片上传组件
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\components\vueUpload.vue
-->

<template>
  <div class="upload" />
</template>
<script>
import bigupload from '../assets/js/bigupload.js'
// import WebUploader from 'webuploader'
export default bigupload
// export default {
//   name: 'VueUpload',
//   props: {
//     accept: {
//       type: Object,
//       default: null
//     },
//     // 上传地址
//     url: {
//       type: String,
//       default: 'api/file/fileUploader'
//     },
//     // 上传最大数量 默认为100
//     fileNumLimit: {
//       type: Number,
//       default: 100
//     },
//     // 大小限制 默认2M
//     fileSingleSizeLimit: {
//       type: Number,
//       default: 2048000
//     },
//     // 上传时传给后端的参数，一般为token，key等
//     formData: {
//       type: Object,
//       default() {
//         return {
//           filename: '',
//           totalSize: '',
//           identifier: '',
//           chunkSize: '',
//           chunkNumber: '',
//           totalChunks: '',
//           currentChunkSize: ''
//         }
//       }
//     },
//     // 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
//     // keyGenerator: {
//     //   type: Function,
//     //   default(file) {
//     //     const currentTime = new Date().getTime()
//     //     const key = `${currentTime}.${file.name}`
//     //     return key
//     //   }
//     // },
//     // identifier: {
//     //   type: Function,
//     //   default(file) {
//     //     const identifier = `${file.name}`
//     //     return identifier
//     //   }
//     // },
//     multiple: {
//       type: Boolean,
//       default: true
//     },
//     // 上传按钮ID
//     uploadButton: {
//       type: String,
//       default: ''
//     }
//   },
//   data() {
//     return {
//       uploader: null
//     }
//   },
//   mounted() {
//     // this.initWebUpload()
//     bigupload.initWebUpload()
//   },
//   methods: {
//     // initWebUpload() {
//     //   this.uploader = WebUploader.create({
//     //     auto: true, // 选完文件后，是否自动上传
//     //     swf: '../../static/lib/webuploader/Uploader.swf', // swf文件路径
//     //     server: this.url, // 文件接收服务端
//     //     pick: {
//     //       id: this.uploadButton, // 选择文件的按钮
//     //       multiple: this.multiple, // 是否多文件上传 默认false
//     //       label: ''
//     //     },
//     //     accept: this.getAccept(this.accept), // 允许选择文件格式。
//     //     threads: 20,
//     //     fileNumLimit: this.fileNumLimit, // 限制上传个数
//     //     // fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
//     //     formData: this.formData, // 上传所需参数
//     //     chunked: true, // 分片上传
//     //     chunkSize: 1024 * 1024 * 5, // 分片大小
//     //     // chunkNumber: 1,
//     //     // totalChuncks: 3,
//     //     // totalSize: 15400,
//     //     // currentChunckSize: 1,
//     //     // identifier: this.formData.name,
//     //     duplicate: true// 重复上传
//     //   })
//     //   // 当有文件被添加进队列的时候，添加到页面预览
//     //   this.uploader.on('fileQueued', (file) => {
//     //     this.$emit('fileChange', file)
//     //   })
//     //   this.uploader.on('uploadBeforeSend', function(block, data) {
//     //     // block为分块数据。
//     //     console.log(block)
//     //     console.log(data)

//     //     // file为分块对应的file对象。
//     //     var file = block.file
//     //     var fileMd5 = file.wholeMd5

//     //     // 修改data可以控制发送哪些携带数据。
//     //     // 将存在file对象中的md5数据携带发送过去。
//     //     data.totalSize = file.size // 文件总大小
//     //     data.identifier = file.size // 文件唯一标识
//     //     data.chunkSize = 1024 * 1024 * 5 // 切片大小
//     //     data.currentChunkSize = block.end - block.start// 当前切片大小
//     //     // data.currentChunkSize = 1024 * 1024 * 5
//     //     data.chunkNumber = block.chunk // 当前所传文件的当前分片数
//     //     data.totalChunks = block.chunks // 当前所传文件的分片总数
//     //     data.md5Value = fileMd5// md5,文件的MD5值
//     //     data.id = file.id// 文件ID
//     //     data.filename = file.name// 文件名称
//     //     // data.file = file;//当前所传分片
//     //     // data.guid = GUID
//     //     data.type = 0

//     //     // 删除其他数据(默认的上传字段)
//     //     delete data.lastModifiedDate
//     //     delete data.size
//     //     delete data.name
//     //   })
//     //   // this.uploader.on('uploadStart', (file) => {
//     //   //   // 在这里可以准备好formData的数据
//     //   //   // this.uploader.options.formData.key = this.keyGenerator(file)
//     //   //   console.log(this.formData)
//     //   //   // this.formData.filename = file.name
//     //   //   this.uploader.options.formData.filename = file.name
//     //   //   this.uploader.options.formData.totalSize = file.size
//     //   //   console.log(file.name)
//     //   //   // this.uploader.options.formData.identifier = file.name
//     //   //   // this.uploader.options.formData.totalSize = file.size
//     //   //   console.log(this.formData)
//     //   // })
//     //   // 文件上传过程中创建进度条实时显示。
//     //   this.uploader.on('uploadProgress', (file, percentage) => {
//     //     this.$emit('progress', file, percentage)
//     //   })
//     //   this.uploader.on('uploadSuccess', (file, response) => {
//     //     this.$emit('success', file, response)
//     //   })
//     //   this.uploader.on('uploadError', (file, reason) => {
//     //     console.error(reason)
//     //     this.$emit('uploadError', file, reason)
//     //   })
//     //   this.uploader.on('error', (type) => {
//     //     let errorMessage = ''
//     //     if (type === 'F_EXCEED_SIZE') {
//     //       errorMessage = `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`
//     //     } else if (type === 'Q_EXCEED_NUM_LIMIT') {
//     //       errorMessage = '文件上传已达到最大上限数'
//     //     } else {
//     //       errorMessage = `上传出错！请检查后重新上传！错误代码${type}`
//     //     }
//     //     console.error(errorMessage)
//     //     this.$emit('error', errorMessage)
//     //   })
//     //   this.uploader.on('uploadComplete', (file, response) => {
//     //     this.$emit('complete', file, response)
//     //   })
//     // },
//     upload(file) {
//       // this.uploader.upload(file)
//       bigupload.upload(file)
//     },
//     stop(file) {
//       this.uploader.stop(file)
//     },
//     // 取消并中断文件上传
//     cancelFile(file) {
//       this.uploader.cancelFile(file)
//     },
//     // 在队列中移除文件
//     removeFile(file, bool) {
//       this.uploader.removeFile(file, bool)
//     },
//     getAccept(accept) {
//       switch (accept) {
//         case 'text':
//           return {
//             title: 'Texts',
//             exteensions: 'doc,docx,xls,xlsx,ppt,pptx,pdf,txt',
//             mimeTypes: '.doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt'
//           }
//         case 'video':
//           return {
//             title: 'Videos',
//             exteensions: 'mp4',
//             mimeTypes: '.mp4'
//           }
//         case 'image':
//           return {
//             title: 'Images',
//             exteensions: 'gif,jpg,jpeg,bmp,png',
//             mimeTypes: '.gif,.jpg,.jpeg,.bmp,.png'
//           }
//         default: return accept
//       }
//     }
//   }
// }
</script>
<style lang="scss">
// 官方的css
</style>
